<template>
	<view class="main">
		<Head></Head>
		<scroll-view class="main-top" :style="'height:calc(100% - 164px - '+KeyboardHeight+'px );overflow-y: scroll;'"
			scroll-y="true" :scroll-top="scrollTop">
			<view class="top">
				<view class="top-top" v-for="(item,index) in list" :key="index">
					<view class="top-left" v-if="item.title.length>2">{{item.title}}</view>
					<view class="top-left " v-else>
						<view class="top-title">
							{{item.title}}
						</view>
					</view>
					<view class="top-right">{{item.name | ellipsis}}</view>
				</view>
				<view class="box-center">
					<view class="box-txt">备注</view>
					<u-textarea class="box-text" :style="'height:calc(' + (screenHeight - 550) +'px );'"
						:cursor-spacing="200" :adjust-position="false" placeholder="" maxlength="-1" v-model="value1"
						confirmType="done"></u-textarea>
				</view>
			</view>
		</scroll-view>
		<view class="btm">
			<u-button type="primary" class="btn3" text="返回" color="#FF6E91" @tap="cancel"></u-button>
			<u-button type="primary" class="btn2" text="保存" color="#7ADFCA" @tap="nav"></u-button>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/html/head.vue'
	import {
		GetHuLiInfo
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Head
		},
		data() {
			return {
				value1: '',
				list: [{
						title: '年龄',
						name: ''
					},
					{
						title: '级别护理',
						name: ''
					},
					{
						title: '入科时间',
						name: ''
					},
					{
						title: '主治医师',
						name: ''
					},
					{
						title: '过敏信息',
						name: ''
					},
					{
						title: '临床诊断',
						name: ''
					},
					{
						title: '风险管理',
						name: ''
					}
				],
				resulist: [],
				KeyboardHeight: 0,
				scrollTop: 0,
				Navlist: [],
				screenHeight: 0
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'passObj', 'scanningArray', 'deleteObj'])
		},
		onShow() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height
				if (res.height == 0) {
					this.scrollTop = 0
				} else {
					this.$nextTick(() => {
						this.scrollTop = 400
					})
				}
			})
		},
		watch: {
			deleteObj: {
				// deep: true,
				handler(newval, oldval) {
					if (newval.MRN != oldval.MRN) {
						this.GetHuLiInfoFun()
					}

				},
			},
		},
		filters: {
			//文字数超出时，超出部分使用...
			ellipsis(value) {
				if (!value) return ''
				if (value.length > 14) {
					return value.slice(0, 14) + '...'
				}
				return value
			}
		},
		mounted() {
			this.GetHuLiInfoFun()
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.screenHeight)
					this.screenHeight = res.screenHeight
				}
			});

		},
		methods: {
			cancel() {
				uni.redirectTo({
					url: '../hospitallist/index'
				})
			},
			async nav() {
				try {
					const user = uni.getStorageSync('userInfo')
					const obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: user.hoscode,
						mrn: obj.MRN,
						series: obj.SERIES,
						stay: 'I',
						precode: this.value1,
						remark: '',
						page: this.Navlist[0].page,
						bedid: obj.BEDID,
						pname: obj.PNAME,
						operdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.ChanggeHuLiInfo(data)
					if (res[0].result == '1') {
						uni.showToast({
							title: '保存成功！',
							duration: 1000
						});
						await this.GetHuLiInfoFun()
					} else {
						uni.showToast({
							title: '保存失败！',
							duration: 1000,
							icon: 'error'
						});
					}
				} catch (e) {

				}
			},
			async GetHuLiInfoFun() {
				try {
					uni.showLoading({
						title: '加载中...', //显示的文字
						// duration: 3000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					const obj = uni.getStorageSync('deleteObj')
					const data = {
						HosKind: user.hoscode,
						deptid: user.HosKind,
						mrn: obj.MRN,
						series: obj.SERIES
					}
					const res = await this.$http.GetHuLiInfo(data)
					if (res) {
						this.Navlist = res
						let values = Object.values(res[0]);
						this.value1 = values[8].replace(/\r\n/g, "<br/>") + ''
						this.list = [{
									title: '年龄',
									name: res[0].page
								},
								{
									title: '级别护理',
									name: res[0].carelevel
								},
								{
									title: '入科时间',
									name: res[0].admdate
								},
								{
									title: '主治医师',
									name: res[0].dr
								},
								{
									title: '过敏信息',
									name: res[0].pallergy
								},
								{
									title: '临床诊断',
									name: res[0].diag
								},
								{
									title: '风险管理',
									name: res[0].QITA
								}
							],
							uni.hideLoading();
					}
				} catch (e) {
						uni.hideLoading();
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		// padding: 102px 0 0 0;
		box-sizing: border-box;
	}

	.main-top {
		// height: calc(100vh - 102px);
		overflow-y: scroll;
		position: relative;
	}

	.top {
		padding: 10px 10px 0;
		// overflow-y: scroll;
	}

	.top-top {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.top-left {
			width: 35%;
			height: 36px;
			background: #B9CACB;
			border-radius: 6px 2px 2px 6px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 0px;
		}

		.top-title {
			width: 63px;
			text-align-last: justify;
			text-align: justify;
		}

		.top-right {
			width: 60%;
			height: 34px;
			background: #FFFFFF;
			border-radius: 0px 6px 6px 0px;
			border: 1px solid #B9CACB;
			border-left: 0px;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			white-space: nowrap;

			.right-title {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				line-height: 24px
			}
		}

	}

	.box-center {
		background: #B9CACB;
		border-radius: 6px 6px 0px 0px;

		.box-txt {
			font-size: 15px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 35px;
			text-align: center;
		}
	}

	.u-textarea ::v-deep {
		border-top: 0;
		border-radius: 0 0 4px 4px !important;
		height: calc(100% - 550px);
		text-align: center;

		.u-textarea__field {
			height: 100% !important;
		}

		.uni-textarea-wrapper {
			overflow: hidden !important;
		}
	}

	.btm {
		display: flex;
		align-items: center;
		padding: 10px 10px 0;
		// position: absolute;
		// bottom: 10px;
		// left: 0;
		width: 95%;

		.u-reset-button ::v-deep .u-button__text {
			font-size: 18px !important;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 27px;
			letter-spacing: 14px;
		}

		.btn2 {
			box-shadow: 0px 2px 6px 0px #6AC8B5;
		}

		.btn3 {
			box-shadow: 0px 2px 6px 0px #ff6e91;

			padding-left: 14px;
			width: 80%;
			margin-right: 11px;
		}
	}
</style>
